<template>
  <div id="app">
    <h1>vue 权限管理</h1>
    <button v-has="'edit'">编辑</button>
    <button v-has="'add'">添加</button>
    <button v-has="'delete'">删除</button>
    <div>
      <button @click="addEditPermission">编辑权限</button>
      <button @click="addAddPermission">添加权限</button>
      <button @click="addDeletePermission">删除权限</button>
    </div>
  </div>
</template>

<script>
// import has from './directives/has.js'
import { setPermission } from './store/setPermission'
export default {
  name: 'App',
  // directives: {
  //   has
  // }
  methods: {
    addEditPermission () {
      // this.$store.dispatch('setPermission', { item: 'edit', value: !this.$store.state.buttonPermission.edit })
      // setPermission({ item: 'edit', value: !this.$store.state.buttonPermission.edit })
      // this.$forceUpdate() // 强制更新组件
      this.$nextTick(function () {
        setPermission({ item: 'edit', value: !this.$store.state.buttonPermission.edit })
        this.$forceUpdate()
      })
    },
    addAddPermission () {
      this.$store.dispatch('setPermission', { item: 'add', value: !this.$store.state.buttonPermission.add })
      this.$forceUpdate() // 强制更新组件
    },
    addDeletePermission () {
      this.$store.dispatch('setPermission', { item: 'delete', value: !this.$store.state.buttonPermission.delete })
      this.$forceUpdate() // 强制更新组件
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.hidden{
  /* display: none; */
  visibility: hidden;
}
</style>
